<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-07-18 10:32:17
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2022-08-30 14:02:26
 * @FilePath: \ahbs\uc_sys\src\views\Tools\CodeGenerator\Index.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { reactive, ref, unref } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElTable,
  ElTableColumn,
  ElButton,
  ElCheckbox
} from 'element-plus'
import { sysToolsFieldListApi, sysToolsTableListApi } from '@/api/tools'
import { sysDictTypeListApi } from '@/api/dict'
import { createCrudSchemas, createFormSchemas } from './utils'

const tableData = ref<any>([])

const form = reactive({
  database: 'user_center_2',
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  table: '',
  desc: '',
  code: ''
})

const fieldTableRef = ref(null)

// 查询出字典类型
const dictTypeData = ref<any>([])

const apiDictType = async () => {
  let res = await sysDictTypeListApi({})
    .catch(() => {})
    .finally(() => {})
  if (res) {
    dictTypeData.value = res.data
    console.log('dictTypeData', dictTypeData.value)
  }
}
apiDictType()

// 接口查询表信息
const apiTableList = async () => {
  let res = await sysToolsTableListApi({ database: form.database })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    tableData.value = res.data
  }
}
apiTableList()
const onDatabase = () => {
  apiTableList()
}

const fieldData = ref<any>([])

const onTable = async (value) => {
  let res = await sysToolsFieldListApi({ database: form.database, table: value })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    fieldData.value = res.data
  }
}

const attrType = [
  {
    value: 'string',
    label: '文本'
  },
  {
    value: 'dict',
    label: '字典'
  },
  {
    value: 'TreeSelect',
    label: '树选择'
  },
  {
    value: 'date',
    label: '日期'
  },
  {
    value: 'datetime',
    label: '日期时间'
  },
  {
    value: 'refer',
    label: '参照'
  }
]

// 固定类型
const fixedType = [
  {
    value: '',
    label: '不固定'
  },
  {
    value: 'left',
    label: '左'
  },
  {
    value: 'right',
    label: '右'
  }
]

// 综合字段结构
const onCrudSchemas = () => {
  // 获取选中的字段
  let fieldTable: any = unref(fieldTableRef)
  let fieldSelectionData = fieldTable.getSelectionRows()
  form.code = createCrudSchemas(fieldSelectionData)
}

// 表单字段结构
const onFormSchemas = () => {
  let fieldTable: any = unref(fieldTableRef)
  let fieldSelectionData = fieldTable.getSelectionRows()
  form.code = createFormSchemas(fieldSelectionData)
}

const onGetSelect = () => {
  // 获取选中的字段
  let fieldTable: any = unref(fieldTableRef)
  let fieldSelectionData = fieldTable.getSelectionRows()
  form.code = JSON.stringify(fieldSelectionData)
}

// 设置选中项，暂时不知道怎么做
// const onSetSelect = () => {
//   let fieldSelectionData = JSON.parse(form.code)
//   // 获取选中的字段
//   let fieldTable = unref(fieldTableRef)
//   console.log(222, fieldSelectionData)
//   console.log('fieldData', fieldData.value[0])
//   console.log('fieldSelectionData', fieldSelectionData[0])
//   fieldTable.toggleRowSelection(fieldData.value[3])
//   fieldSelectionData.forEach((row) => {
//     //   console.log('row', row)
//     fieldTable.toggleRowSelection(row)
//   })
// }
// 选择字段属性后设置默认值
const onAttrType = (item) => {
  switch (item.attr_type) {
    case 'dict': // 字典处理
      break
    case 'TreeSelect': // 字典处理
      item.form_show = true
      item.childrenField = 'children'
      break
    case 'date': // 日期
      break
    case 'datetime': // 日期时间
      break
    case 'refer': // 参照处理
      break
    case 'text':
    default:
  }
}
</script>

<template>
  <ContentWrap>
    <el-form :model="form" label-width="120px">
      <el-form-item label="数据源">
        <el-input v-model="form.database" placeholder="数据源" @change="onDatabase" />
      </el-form-item>
      <el-form-item label="选择主表">
        <el-select v-model="form.table" placeholder="请选择主表" @change="onTable">
          <el-option
            v-for="item in tableData"
            :key="item.table_name"
            :label="item.table_comment"
            :value="item.table_name"
          />
        </el-select>
      </el-form-item>
      <el-table :data="fieldData" ref="fieldTableRef">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="column_name" label="字段名称" width="150" />
        <el-table-column prop="column_comment" label="中文注释" width="150">
          <template #default="scope">
            <el-input v-model="scope.row.column_comment" placeholder="中文注释" />
          </template>
        </el-table-column>
        <el-table-column prop="width" label="宽度" width="80">
          <template #default="scope">
            <el-input v-model="scope.row.width" placeholder="宽度" />
          </template>
        </el-table-column>
        <el-table-column prop="data_type" label="字段类型" width="100" />
        <el-table-column prop="fixed" label="固定" width="120">
          <template #default="scope">
            <el-select v-model="scope.row.fixed" placeholder="固定">
              <el-option
                v-for="(item, index) in fixedType"
                :key="item.value + '_' + index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div style="display: flex; align-items: center">
              <!-- <el-icon><timer /></el-icon> -->
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="attr_type" label="属性类型" width="150">
          <template #default="scope">
            <el-select
              v-model="scope.row.attr_type"
              placeholder="选择类型"
              @change="onAttrType(scope.row)"
            >
              <el-option
                v-for="(item, index) in attrType"
                :key="item.value + '_' + index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div style="display: flex; align-items: center">
              <!-- <el-icon><timer /></el-icon> -->
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="参数">
          <template #default="scope">
            <el-checkbox v-model="scope.row.table_show" label="列表" />
            <el-checkbox v-model="scope.row.search_show" label="查询" />
            <el-checkbox v-model="scope.row.form_show" label="编辑" />
            <el-checkbox v-model="scope.row.detail_show" label="查看" />
            <template v-if="scope.row.attr_type === 'dict'">
              <br />
              <el-select v-model="scope.row.dict_type" placeholder="请选择字典">
                <el-option
                  v-for="(item, index) in dictTypeData"
                  :key="item.code + '_' + index"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </template>
            <template v-if="scope.row.attr_type === 'refer'">
              <el-input v-model="scope.row.getListApi" placeholder="参照列表接口" />
              <el-input v-model="scope.row.refer_title" placeholder="标题" />
              <el-input v-model="scope.row.nameField" placeholder="名称字段" />
              <el-input v-model="scope.row.valueField" placeholder="值字段" />
              <el-input v-model="scope.row.crudSchemas" placeholder="列表配置" />
            </template>
            <template v-if="scope.row.attr_type === 'TreeSelect'">
              <el-input v-model="scope.row.data" placeholder="数据变量" />
              <el-input v-model="scope.row.childrenField" placeholder="子级字段" />
              <el-input v-model="scope.row.nameField" placeholder="名称字段" />
              <el-input v-model="scope.row.valueField" placeholder="值字段" />
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="p-10px">
      <ElButton @click="onCrudSchemas">crudSchemas代码生成</ElButton>
      <ElButton @click="onFormSchemas">formSchemas代码生成</ElButton>
      <ElButton @click="onGetSelect">获取选中项信息</ElButton>
    </div>
    <el-input
      v-model="form.code"
      :autosize="{ minRows: 4, maxRows: 20 }"
      type="textarea"
      placeholder="代码"
    />
  </ContentWrap>
</template>
